讓我們來看看如何開始使用我們定義好的 Vue Component

註冊

在使用 Component 之前我們必須先註冊它，Vue 有兩種的組件類型可以用來註冊

全域型
就是上一篇出現的 Vue.component( id, [definition] )
使用全域註冊意味著我們在 Vue instance 掛載底下的任何地方都可以使用該 Component

//foo.js
Vue.component('foo', {
  data: function () {
    return {
      msg: 'foo'
    }
  },
  template: '<p>{{msg}}</p>'
})
new Vue({
  el: '#app'  
})

//index.html
<div id="app">
    <foo />
</div>

什麼時候會用到

• 剛接觸 Vue 的時候，通常我們跟著官方文件的例子，都是使用這種方式
• 網站很輕量直接用引入 vue.js 不使用龐大的 webpack 建構系統

注意
Vue3 已經移除該 API

區域型
怎麼註冊區域型 Component ，非常簡單就是前篇提到的 components選項

//foo.js
const foo = {
  data: function () {
    return {
      msg: 'foo'
    }
  },
  template: '<p>{{msg}}</p>'
}

new Vue({
  el: '#app',
  components: { foo }
})

若開始使用 Vue-cli 開始專案，通常我們看到的會是像這樣

//parent.vue
<template>
  <div>
      <Chlid />
  </div>
</template>
<script>
improt Child from '@/componets/Child'

export default {
   components: { Child }
}
</script>

什麼是.vue ?

這就是我們的 單文件組件
我這邊會建議，當你要正式將 Vue 使用在你的專案上時，除非你是真的很不想學習 Vue-Cli NPM Webpack之類的技術時，只想直接引入 js 做使用，否則一律推薦使用單文件組件的方式來開發

下一篇我們再來談談單文件組件，看看他有什麼樣的好處，為什麼會推薦使用它呢？